{% extends "base2.html" %}
{% block content %}

{{debug}}
{% for photo in photos %}
  	<div class="post" id="photo">
  		<div class="al">
		  	<a class="ap" href="{{photo.localurl}}#">
				<img 
                    title="{{photo.title}}" 
                    src="{% cycle https://www-gm-opensocial.googleusercontent.com/gadgets/proxy/refresh=18000&container=gm&gadget=http%3A%2F%2Fwww.google.com%2Fig%2Fmodules%2Fgm%2Fphotos%2Fcard-flickr.xml/,//images2-focus-opensocial.googleusercontent.com/gadgets/proxy?container=focus&gadget=a&refresh=18000&no_expand=1&rewriteMime=image%2F*&url= %}{{photo.src}}" 
                    height="{{photo.height}}px" 
                    width="{{photo.width}}px"
                />
                <!--<img title="{{photo.title}}" src="//images2-focus-opensocial.googleusercontent.com/gadgets/proxy?container=focus&gadget=a&no_expand=1&rewriteMime=image%2F*&nocache=1&url={{photo.src}}" height="{{photo.height}}px" width="{{photo.width}}px"/>
		  		<img title="{{photo.title}}" src="{{photo.src}}" height="{{photo.height}}px" width="{{photo.width}}px"/>-->
		  	</a>
		  	<div class="setcontainer">		  		
		  		<div class="set">		  			
					<b class="title">{{photo.title}}</b>
					<p class="description">{{photo.description}}</p>
					<p class="exif" style="display: none;"></p>
				</div>
			</div>
	  	</div>
	  	<div id="shadow"></div>
	  	<div class="bottom">			
	  		<div id="{{photo.id}}" class="commentbtn button" onclick="return addcomment(this, {{photo.id}})">comment</div>
	  		<div class="favebtn {% ifequal  photo.isfavorite "1" %}buttonactive{% else %}button{% endifequal %}" onclick="return addfave(this, {{photo.id}})">fave</div> 		
			<div class="desc" style="display:none;">
				<h2 class="title">{{photo.title}}</h2>
				<p class="description">{{photo.description}}</p>
				<p>by <a href="/photos/{{photo.nsid}}" >{{photo.ownername}}</a> on <a href="{{photo.url}}" >{{photo.date}} {{photo.time}}</a></p>
				<h2>Stats</h2> 
				Views: {{photo.views}} Comments: {{photo.comments}}
				{% if photo.exif %}
					<h2><a href="{{photo.url}}meta">Exif</a></h2>
					{{photo.exif}}					
				{% endif %}
			</div>
        </div>
	</div>
{% endfor %}
{% for set in sets %}
  	<div class="post" id="photo">
  		<div class="al">
		  	<a class="ap" href="{{set.localurl}}">
				<img title="{{photo.title}}" src="https://www-gm-opensocial.googleusercontent.com/gadgets/proxy/refresh=3600&container=gm&gadget=http%3A%2F%2Fwww.google.com%2Fig%2Fmodules%2Fgm%2Fphotos%2Fcard-flickr.xml/http://farm{{set.farm}}.static.flickr.com/{{set.server}}/{{set.primary}}_{{set.secret}}_m.jpg" />
		  		<!--<img class="setcover" title="{{set.title}}" src="http://farm{{set.farm}}.static.flickr.com/{{set.server}}/{{set.primary}}_{{set.secret}}_m.jpg" />-->
		  	</a>	
		  	<div>		  		
		  		<div class="set">
		  			<div id="point"></div>
					<b>{{set.title}}</b>
					<p>{{set.description}}</p>
					<hr></hr> 
					{{set.photos}} Photos
				</div>
			</div>	        
	  	</div>	  	
	  	<div id="shadow"></div>	  	
	</div>
{% endfor %}
{% if sets %}
<script type="text/javascript" language="javascript">
$('.al img').load(function() {
	if(this.width < 240){
	    var newsrc = this.src.replace("_m","");
	    this.src = newsrc;
    }
});	
$(function(){
	//run masonry when window is resized
		$(window).resize(function() {
		$('.posts').masonry();
	});
});
//run masonry when page first loads
$(window).load(function() {
	$('.posts').masonry({ columnWidth: 1 });
	animate: false
});
</script>
{% endif %}
<script type="text/javascript" language="javascript">
	$(function(){
		//run masonry when window is resized
			$(window).resize(function() {
			$('.posts').masonry();
		});
	});
	//run masonry when page first loads
	$(document).ready(function(){
		$('.posts').masonry({ columnWidth: 1 }); 
		animate: false
	});	
</script>
{% endblock %}